<template>
    <!-- 下单界面 -->
    <div class="orders">
        <!-- 头部地址 -->
        <div class="topbj">
            <ul class="topbj-ul">
                <li>快递配送</li>
                <li>到店自提</li>
            </ul>

            <!-- 地址 -->
            <!-- 显示的默认地址 -->
            <van-cell is-link @click="show = true" center class="site">
                <template #title>
                    <div class="default">
                        <span class="custom-title"
                            >{{ cicys.name }} <i>{{ cicys.tel }}</i>
                        </span>
                        <p class="custom-title"><i>[默认]</i> {{ cicys.address }}</p>
                    </div>
                </template>
            </van-cell>

            <!-- 其他地址 -->
            <van-action-sheet v-model="show" title="选择地址" @close="close">
                <menus6-view></menus6-view>
            </van-action-sheet>
        </div>

        <!-- 下单商品 -->
        <van-cell :title="`共${catList.length}件商品`" />
        <div class="order-goods">
            <div class="order-goods-item" v-for="(item, index) in catListload" :key="item.id + index">
                <img :src="item.imgs" alt="" />
                <ul>
                    <li class="title">{{ item.title }}</li>
                    <li class="price">￥{{ item.price | monetTo }}</li>
                </ul>
                <span>x{{ item.count }}</span>
            </div>
        </div>

        <!-- 优惠卷部分 -->
        <van-cell-group inset>
            <van-cell title-class="tities" title="优惠卷" value="请选择" is-link />
            <van-cell title-class="tities" title="积分抵扣" value="当前积分10" />
            <van-cell title-class="tities" title="会员优惠" value="-￥10" center> </van-cell>
            <van-cell title-class="tities" title="快递费用" value="免运费" />
            <!-- <van-cell title="备注信息" /> -->
        </van-cell-group>
        <!-- 留言 -->
        <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="150" placeholder="请添加备注(150字以内)" show-word-limit />

        <!-- 支付方式 -->
        <div class="pay_box">
            <div class="pay_title">支付方式</div>
            <div :class="['pay_choice', { active: determined === index }]" @click="determined = index" v-for="(item, index) in pay_list" :key="index">
                <img :src="item.imgPath" alt="" style="width: 22px; height: 22px" />
                <div class="pay_left">{{ item.text }}</div>
                <div class="pay_right">
                    <span>{{ item.pay_form }}{{ money }}(元)</span>
                </div>
            </div>
        </div>
        <!-- 商品总价 -->
        <van-cell title="商品总价" class="priceall" :value="`￥${moneys}`" />

        <!-- 提交订单 -->
        <van-submit-bar text-align="left" :price="moneys * 100" button-text="立即结算" @submit="onSubmit" />
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import Menus6View from "../menus6/Menus6View.vue";
export default {
    components: { Menus6View },
    data() {
        return {
            message: null,
            pay_list: [
                {
                    text: "微信支付",
                    pay_form: "微信快捷支付:",
                    menoyss: "",
                    imgPath: require("../../assets/image/wx.png"),
                },
                {
                    text: "余额支付",
                    pay_form: "可用余额:",
                    menoyss: 999,
                    imgPath: require("../../assets/image/money.png"),
                },
            ],
            show: false,
            orderform: [], // 已经下单商品
            meneyalls: 0, // 商品的总价格
            topmeney: 0,
            // 默认下单地址
            cicys: {
                address: "东法国通信打下",
                id: 0,
                name: "小时",
                tel: 12345678910,
            },
            // 选择下单方式
            determined: 0,
        };
    },
    computed: {
        ...mapState(["catList", "money"]),
        ...mapGetters(["mycity", "myuser"]),

        // 拿到Vuex中下单商品
        catListload() {
            let b = [];
            this.catList.filter((item) => {
                if (item.check) {
                    b.push(item);
                }
            });
            return b;
        },
        // 总价格
        moneys() {
            let a = 0;
            this.catList.forEach((item) => {
                if (item.check) {
                    a += item.count * item.price;
                }
            });

            return a;
        },
    },
    methods: {
        ...mapMutations(["drop", "removecay", "reduce"]),
        // 提交订单
        onSubmit() {
            if (this.money < this.moneys) {
                this.$toast("您的余额不足，请充值");
                this.$router.push("/addmoney");
                return;
            }
            // 总金额减去金额
            this.reduce(this.moneys);
            this.$toast("提交订单成功");
            let data = new Date().toLocaleString();
            this.catList.forEach((item) => {
                if (item.check) {
                    // 添加数据到待发货
                    item.time = data;
                    this.drop(item);
                }
            });

            // 删除已下单的商品
            this.removecay();
            // 路由跳转到待发货页面
            this.$router.push("/orders/2");
        },
        // 第二个按钮
        onClickDisabled(title) {
            console.log(title);
            this.$toast({
                message: "暂无门店信息",
                icon: "close",
            });
        },
        // 关闭地址面板
        close() {
            let city = this.mycity.filter((item) => {
                if (item.isDefault) {
                    return item;
                }
            });
            this.cicys = city[0];
            console.log(this.cicys);
        },
    },
    // 过滤
    filters: {
        monetTo(value) {
            return parseFloat(value).toFixed(2);
        },
    },

    created() {
        this.close(); // 页面加载，获取最新地址
    },
};
</script>

<style lang="scss" scoped>
// 头部
.topbj {
    background-image: linear-gradient(180deg, #e93323 0, #f5f5f5);
    height: 126.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .topbj-ul {
        display: flex;
        width: 355px;
        // border: 1px solid black;
        display: flex;
        align-items: flex-end;
        text-align: center;
        li {
            color: red;
            font-size: 14px;

            &:first-child {
                width: 177.5px;
                height: 40px;
                line-height: 40px;
                // border: 1px solid red;
                width: 160px;
                background: #fff;
                position: relative;
                border-radius: 3px;
                &::after {
                    content: "";
                    width: 0;
                    height: 0;
                    border: 0;
                    border-color: #fff transparent; /*上下颜色 左右颜色*/
                    border-width: 0 17.5px 40px 0px;
                    border-style: solid;
                    position: absolute;
                    right: -10%;
                    top: 0%;
                }
            }
            &:last-child {
                width: 200px;
                height: 30px;
                background: #f7c1bd;
                line-height: 30px;
            }
        }
    }
    // 默认地址
    .site {
        width: 355px;
        background: transparent;
        background: #fff;
        .default {
            // border: 1px solid red;
            width: 100%;
            display: flex;
            flex-direction: column;
            // justify-content: flex-end;
            span {
                font-size: 16px;
                font-weight: 700;
                i {
                    margin-left: 30px;
                }
            }
            p {
                font-size: 13px;
                color: rgb(107, 100, 100);
                i {
                    color: red;
                }
            }
        }
    }

    // 其他地址
    .restsite {
        color: red;
        font-size: 16px;
        margin-left: 30px;
        font-weight: 550;
        .rest-title {
            font-size: 14px;
            margin-top: 10px;
            font-weight: 500;
        }
    }
}
// 优惠券部分
.tities {
    margin-left: -15px;
}

// 商品
.order-goods {
    .order-goods-item {
        display: flex;
        border-top: 1px solid gray;
        // border-bottom: 1px solid gray;
        height: 90px;
        align-items: center;
        justify-content: space-around;
        img {
            width: 65px;
            height: 65px;
        }
        ul {
            height: 65px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 16px;
            // border: 1px solid red;

            .title {
                width: 226.5px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .price {
                color: red;
                font-size: 14px;
            }
        }
        span {
            height: 65px;
            font-size: 12px;
            display: flex;
            flex-direction: column;
        }
    }
}

// 地址
.content {
    padding: 16px 16px 160px;
}

// 下单方式
.pay_box {
    padding: 10px;
    .pay_title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    // 下单选择
    .pay_choice {
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        margin-top: 10px;
        padding: 10px 15px 10px 20px;
        border: 1px solid rgb(232, 211, 211);
        position: relative;
        &::after {
            content: "";
            width: 1px;
            height: 20px;
            background: rgb(232, 211, 211);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        &.active {
            border: 1px solid rgba(246, 3, 3, 0.7);
        }
        .pay_left {
            flex: 1;
            padding-left: 10px;
        }
        .pay_right {
            padding-right: 15px;
            color: rgb(128, 126, 126);
        }
    }
}
.priceall {
    margin-bottom: 50px;
}
</style>
